
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../style/layui-v2.5.6/layui/css/layui.css">
</head>
<style>
    *{
        margin:0px;
        padding: 0px;

    }
    .layui-input{
        border: 2px solid #45b97c;
        border-radius: 8px;
        width:450px;
    }
    h1{
        text-align: center;
        color: black;
        font-weight: bold;
    }
    .big_div{
        margin:0px auto;
        margin-top:20px;
        width:450px;
    }
    .layui-form-label{
        font-weight: bold;
    }
    .shij_p{
        font-size: 18px;
        font-weight: bold;
        display:inline-block;
    }
    .kuang_input{
        width:250px;
        height:30px;
        border: 2px solid #45b97c;
        border-radius: 8px;
        font-size: 18px;
    }
    .layui-table-page{
        background: #FBFBFB;
    }
    .kuang_input2{
        width:250px;
        height:30px;
        border: 2px solid black;
        margin-bottom: 10px;
    }
</style>
<body>
    <h1>关于用户登录表的操作</h1>
    <div class="big_div">
    <form class="layui-form" lay-filter="addCustomerLogin-form">
        <div class="layui-form-item">
            <label class="layui-form-label">账号：</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即添加</button>
            </div>

        </div>
    </form>
    </div>

    <div style="font-size: 10px" class="selCustomerLogin-div">
        <table id="CustomerLogin-tab" lay-filter="test"></table>
    </div>

<%--    修改表单--%>
    <form id="updCustomerLogin-form" class="layui-form" lay-filter="updFormFilter">

        ID:<input class="kuang_input2" name="customerId" readonly><br>
        账号：<input class="kuang_input2" name="loginName" readonly><br>
        密码：<input class="kuang_input2" name="password"><br>
        状态：<select name="userStats">
                <option value="1">可用</option>
                <option value="2">冻结</option>
                <option value="3">注销</option>
            </select>
        <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="updFormDemo">修改</button>

    </form>


    <script id="tab-toolbar" type="text/html">
        <p class="shij_p">修改时间：</p>
        <input type="date" class="kuang_input" id="startTime">~
        <input type="date" class="kuang_input" id="endTime">

        <button class="layui-btn layui-btn-normal" lay-event="search">查询</button>
        <button id="del_btn" class="layui-btn layui-btn-danger" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-warm" lay-event="update">修改</button>
    </script>



    <script src="../../style/layui-v2.5.6/layui/layui.js"></script>
    <script type="text/javascript" src ="../../style/js/jquery-3.3.1.js"></script>
    <script>
        //加载layui模块
        layui.use(['form','layer','table'],function(){
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;
            $("#updCustomerLogin-form").hide();

            //使用js代码提交表单
            //监听提交
            form.on('submit(formDemo)', function(data) {
                // layui获取表单所有元素的值
                var data1 = form.val("addCustomerLogin-form");
                // 使用ajax提交表单
                $.ajax({
                    type : "post",
                    url : "../../CustomerLogin/addCustomerLogin",
                    data : data1,//请求携带参数
                    dataType:"json",//预定义返回值类型

                    success : function(data) {
                        //data是json对象 json对象.属性
                        // map中存在key是msg的信息
                        // 练习 完善添加 不能添加重复的账号
                            layer.msg(data.msg);
                            //表格刷新
                            table.reload("CustomerLogin-tab");
                    }
                });
                return false;
            });
            //用户账号密码查询展示
            table.render({
                elem: '#CustomerLogin-tab'
                ,height: 385
                ,url: '../../CustomerLogin/selCustomerLogin' //数据接口
                ,toolbar:"#tab-toolbar"
                ,skin:'line'//边框风格
                ,page: true //开启分页
                ,cols: [[ //表头
                    {type:"checkbox"},
                    {field:  'customerId', title: 'ID', width:200, sort: true}
                    ,{field: 'loginName', title: '账号', width:250,sort: true }
                    ,{field: 'password', title: '密码', width:250,sort: true}
                    ,{field: 'userStats', title: '状态', width:250,sort: true}
                    ,{field: 'modified_time', title: '最后修改时间', width:300,sort: true}
                ]]
            });


            // 监听表头工具栏
            //监听事件 test是表格的lay-filter值
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'delete':
                        // 获取选中的行对象
                        var data = table.checkStatus("CustomerLogin-tab").data;
                        // 把多个id拼接
                        var ids = "";
                        for (var i = 0; i < data.length; i++) {
                            ids += data[i].customerId + ",";
                        }

                        // 调用ajax到后台执行删除
                        $.ajax({
                            type: "post",
                            url: "../../CustomerLogin/delCustomerLogin",
                            data: {"ids": ids},
                            dataType: "json",
                            success: function (data) {
                                layer.msg(data.msg);
                                table.reload("CustomerLogin-tab");
                            }
                        });
                        break;


                    case 'update':
                        //当选择一条数据时，才打开弹出层并且回显数据
                        var data = table.checkStatus("CustomerLogin-tab").data;
                        //判断选择对象的数量
                         if(data.length != 1){
                             layer.msg("请选择一条数据修改");
                             //返回 从该函数中返回
                             return;
                         }
                        //给表单赋值 回显
                        form.val("updFormFilter", {
                            "customerId" : data[0].customerId,
                            "loginName" : data[0].loginName,
                            "password" : data[0].password,
                            "userStats" : data[0].userStats

                        });
                        index = layer.open({
                            type:"1",
                            title : "修改窗口",
                            area: ['390px', '300px'],
                            content:$("#updCustomerLogin-form")
                        });
                        break;

                    case 'search':
                        // 获取日期框中的值
                        table.reload("CustomerLogin-tab",{
                            where:{"startTime":$("#startTime").val(),
                                "endTime":$("#endTime").val()}
                        });
                        break;
                }

            });
            //监听表单提交事件
            form.on("submit(updFormDemo)",function(data){

                //获取到修改表单的参数
                var data1 = form.val("updFormFilter");
                //使用ajax传入后台进行修改
                $.ajax({
                    type:"post",
                    url:"../../CustomerLogin/updCustomerLogin",
                    data:data1,
                    dataType:"json",
                    success:function(data){
                        //打印后台返回的是否修改成功的标识信息
                        layer.msg(data.msg);
                        //关闭弹出层
                        layer.close(index);
                        //重载表格
                        table.reload("CustomerLogin-tab");
                    }
                });
                return false;
            });

        });
    </script>
</body>
</html>
